<template>
  <span class="icho-border pre-img-box">
    <el-image :src="resourceURL" fit="contain" class="neu-center" @click="drawer = true">
      <template #error>
        <div class="image-slot">
          <el-image :src="getSrc('error')" class="logo" />
        </div>
      </template>
    </el-image>
    <el-drawer v-model="drawer" :title="resourceName" direction="btt" destroy-on-close size="100%">
      <div class="align-center">
        <el-image :src="resourceURL" fit="contain">
          <template #error>
            <div class="image-slot">
              <el-image :src="getSrc('error')" class="logo" />
            </div>
          </template>
        </el-image>
      </div>
    </el-drawer>
  </span>
</template>
<script setup>
import { ref } from 'vue'

const drawer = ref(false)
const props = defineProps({
  resourceName: {
    type: String,
    default: ''
  },
  resourceURL: {
    type: String,
    default: ''
  }
})

// 获取图片路径
const getSrc = (name) => {
  const path = `../../assets/img/${name}.png`;
  const modules = import.meta.globEager("../../assets/img/*.png");
  return modules[path].default;
};
</script>
<style lang="scss" scoped>
.pre-img-box {
  width: 100%;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.el-image {
  width: 100%;
}
</style>
